<template>
  <view class="c">
    <!-- search-bar -->
    <u-sticky>
      <view
        style="
          height: 46px;
          display: flex;
          align-items: center;
          padding: 3px 6px;
          background-color: #fff;
        "
      >
        <li-search
          placeholder="搜索"
          v-model="m_keyword"
          :height="36"
          v-on:search="onSearch"
        />
      </view>
    </u-sticky>

    <!-- goods  -->
    <scroll-view
      v-if="m_goodsList.length > 0"
      class="product-section"
      scroll-y
      scroll-with-animation
      @scrolltolower="onscrolltolower"
    >
      <view class="wrapper">
        <view class="products">
          <view
            class="product"
            v-for="(good, key) in m_goodsList"
            :key="key"
            @tap="goToDetail(good)"
          >
            <image
              :src="imageUrl + good.FProImage"
              mode="aspectFit"
              class="image"
            />

            <view class="content">
              <view class="name">{{ good.FName }}</view>
              <view class="price">
                <view>
                  <text class="symbol">￥</text>
                  <text>{{ good.FMallPrice }}</text>
                </view>
                <Actions
                  :number="cart.find((i) => i.FGoodsID == good.FItemID).FQty"
                  @add="handleAddToCart(good)"
                  @minus="handleMinusFromCart(good)"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view
      v-else
      style="
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 50px;
      "
    >
      <image
        src="/static/images/sswk.png"
        style="width: 300rpx"
        mode="widthFix"
      />
      <view style="color: #141414; margin-top: 20px"
        >抱歉，没有找到相关商品</view
      >
      <view style="color: #b39385; margin-top: 10px">换个词试试吧</view>
    </view>

    <CartBar
      :hasLogin="hasLogin"
      :cart="cart"
      :tCount="tCount"
      :tMoney="tMoney"
      @updateCart="updateCart"
    />
  </view>
</template>

<script>
import { onMounted, ref } from "@vue/composition-api";
import { reqPost } from "../../common/http.request";
import { storeToRefs } from "pinia";
import { useUser } from "../../store/useUser";
import { useShop } from "../../store/useShop";
import CartBar from "../../components/cart-bar/cart-bar.vue";
import Actions from "../tab_bar/components/actions/actions.vue";
import { uGetStorageSync, uNavigateTo, uToast } from "../../utils/uniUtils";

export default {
  components: {
    CartBar,
    Actions,
  },
  onLoad({ kw }) {
    if (kw) {
      this.m_keyword = kw;
    }
  },
  onReachBottom() {
    console.log("onReachBottom");
    if (this.m_goodsList.length < this.m_count) {
      this.m_page_index += 1;
      this.GetPageData();
    }
  },
  setup() {
    onMounted(async function () {
      await onSearch();
    });

    const m_keyword = ref("");
    const m_goodsList = ref([]);
    const hasLogin = storeToRefs(useUser()).hasLogin;
    const cart = storeToRefs(useShop()).cart;
    const tCount = ref(useShop().tCount);
    const tMoney = ref(useShop().tMoney);
    const m_page_index = ref(1);
    const m_count = ref(0);

    async function onSearch() {
      if (m_keyword.value.length == 0) {
        uToast("请输入关键字~", "error");
        return;
      }
      m_goodsList.value = [];
      m_page_index.value = 1;
      GetPageData();
    }

    async function GetPageData() {
      const { Data, Count } = await reqPost("GetGoodsList", {
        condition: m_keyword.value,
        class_id: "",
        page_index: m_page_index.value,
        page_size: 10,
        order_type: 0,
        brand_id: 0,
      });
      m_count.value = Count;
      m_goodsList.value = [...m_goodsList.value, ...Data];
    }

    function updateCart() {
      cart.value = useShop().cart;
      tCount.value = useShop().tCount;
      tMoney.value = useShop().tMoney;
    }

    async function handleAddToCart(product) {
      if (useUser().hasLogin) {
        await useShop().AddToCart(product.FItemID, product.FMallPrice);
        cart.value = useShop().cart;
        tCount.value = useShop().tCount;
        tMoney.value = useShop().tMoney;
      } else {
        uNavigateTo("/pages/login/login");
      /*   if (uGetStorageSync("hasBindStore")) {
        } else {
          uToast("未绑定店铺~", "error");
        } */
      }
    }

    async function handleMinusFromCart(product) {
      if (useUser().hasLogin) {
        await useShop().MinusToCart(product.FItemID);
        cart.value = useShop().cart;
        tCount.value = useShop().tCount;
        tMoney.value = useShop().tMoney;
      } else {
        if (uGetStorageSync("hasBindStore")) {
          uNavigateTo("/pages/login/login");
        } else {
          uToast("未绑定店铺~", "error");
        }
      }
    }

    function goToDetail(goods) {
      uNavigateTo("/pages/goods/detail?id=" + goods.FItemID);
    }

    function onscrolltolower(e) {
      console.log("onscrolltolower");
    }

    return {
      m_keyword,
      m_goodsList,
      hasLogin,
      cart,
      tCount,
      tMoney,
      updateCart,
      onSearch,
      handleAddToCart,
      handleMinusFromCart,
      goToDetail,
      onscrolltolower,
      m_page_index,
      m_count,
      GetPageData,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/search.scss";
</style>
